<template>
    <div class="editor-container">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
        <Editor style="overflow-y: hidden;height: 540px;" v-model="valueHtml" :defaultConfig="editorConfig"
            @customPaste="customPaste" :mode="mode" @onCreated="handleCreated" />
        <el-row justify="end">
            <el-button @click="complete" type="primary" size="normal">完成</el-button>
        </el-row>
    </div>
</template>
<script>
import { defineComponent, onBeforeUnmount, shallowRef, ref, watchEffect, onMounted, nextTick, watch, watchSyncEffect, watchPostEffect } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { URL } from '@/tool/common';

export default defineComponent({
    name: 'Editors',
    components: {
        Editor,
        Toolbar
    },
    props: {
        value: {
            type: String,
            default: () => null
        }
    },
    setup(a, b) {
        const editorRef = shallowRef();// 编辑器实例，必须用 shallowRef
        const valueHtml = ref(null)
        watchEffect(() => {
            if (a.value) {
                valueHtml.value = a.value;
            }
        });

        const toolbarConfig = {
            excludeKeys: [
                "fullScreen",
                "uploadVideo",
                'fullScreen',
                'insertVideo'
            ]
        }

        const editorConfig = {
            placeholder: '请输入内容...',
            MENU_CONF: {
                uploadImage: {
                    server: URL.BASE + URL.API_UPLOAD_RICH_IMAGHE,
                    fieldName: "file_list",
                    maxFileSize:200*1024*1024, // 200mb
                    maxNumberOfFiles:5,
                }
            }
        }
        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            if (editor == null) return
            editor.destroy()
        })

        const handleCreated = (editor) => {
            editorRef.value = editor // 记录 editor 实例，重要！
        }
        const customPaste = (a, b, c) => {
            //console.log("黏贴事件", a, b, c);
        }

        return {
            complete() {
                b.emit('complete',valueHtml.value);
            },
            editorRef,
            valueHtml,
            mode: 'default', // 或 'simple'
            toolbarConfig,
            editorConfig,
            handleCreated,
            customPaste
        };
    }
});

</script>
<style lang="scss" scoped>

.editor-container {
    width: 100%;
    min-height: 450px;
    height: auto;
}
</style>